<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2 ref="h2Dom">el的定位和模板：{{ msg }}</h2>
        <input type="text" v-model="msg">
    </div>
    <hr>
    <input type="button" value="销毁vue实例" onclick="doDestroyed()">
</body>
<script>
    let vm = new Vue({
        el: "#app",
        // template:"<h1>template的模板</h1>",
        data:{
            msg:"测试数据"
        },
        // 在实例初始化之后，数据观测 和 事件配置之前被调用。
        // 分割数据监控定义和实例初始化两阶段
        beforeCreate: function () { 
            console.group("beforeCreate=====>");
            console.log("$el:",this.$el);
            console.log("$options:",this.$options)
            console.log("$data:",this.$data);
            console.groupEnd();
        },
        // 在实例创建完成后被立即调用
        created: function () {
            console.group("created=====>");
            console.log("$el:",this.$el);
            console.log("$options:",this.$options)
            console.log("$data:",this.$data);
            console.log("$data:",JSON.stringify(this.$data));
            console.groupEnd();
        },
        // 在挂载开始之前被调用：相关的 render 函数首次被调用。
        // 选择实例对应的页面结构模板并完成虚拟DOM的生成
        beforeMount: function () { 
            console.group("beforeMount=====>");
            // 在该钩子函数内部，$el构建的真实实例容器DOM对象并不存在，如果输出结果不为undefined
            // 此时的值是 el配置指向的页面占位元素
            console.log("$el:",this.$el);   
            console.log("$options:",this.$options)
            console.log("$data:",this.$data);
            console.log("$data:",JSON.stringify(this.$data));
            console.groupEnd();
        },
        // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
        mounted: function () {
            console.group("mounted=====>");
            console.log("$el:",this.$el);   
            console.log("$options:",this.$options)
            console.log("$data:",this.$data);
            console.log("$data:",JSON.stringify(this.$data));
            console.groupEnd();
        },
        // 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM
        beforeUpdate: function () { 
            console.group("beforeUpdate=====>");
            console.log("h2Dom:",this.$refs.h2Dom.textContent );
            console.log("msg:",this.msg );

            console.groupEnd();
        },
        // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
        updated: function () {
            console.group("updated=====>");
            console.log("h2Dom:",this.$refs.h2Dom.textContent );
            console.log("msg:",this.msg );
            console.groupEnd();
        },
        // 实例销毁之前调用。在这一步，实例仍然完全可用。
        beforeDestroy: function () {
            console.group("beforeDestroy=====>");
            console.log("$el:",this.$el);   
            console.log("$options:",this.$options)
            console.log("$data:",this.$data);
            console.log("$data:",JSON.stringify(this.$data));
            console.groupEnd();
        },
        // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除
        destroyed: function () {
            console.group("destroyed=====>");
            console.log("$el:",this.$el);   
            console.log("$options:",this.$options)
            console.log("$data:",this.$data);
            console.log("$data:",JSON.stringify(this.$data));
            console.groupEnd();
        }
        // destroyed() { }
    })

    // setTimeout(function(){
    //     // vm.$mount("#app");
        // vm.$mount();
    // },3000)

    function doDestroyed(){
        vm.$destroy();
        vm = undefined; // 触发浏览器的垃圾回收器
    }
</script>

</html>